<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>{% block title %}{% if subject %}{{ subject }}{% endif %}{% endblock %}</title>
  <style type="text/css">
    /* Client-specific Styles */
    #outlook a {
      padding:0;
    } /* Force Outlook to provide a "view in browser" menu link. */

    body{
      color: #333;
      font-family: Helvetica, Arial, sans-serif;
      margin:0;
      padding:0;
      -webkit-text-size-adjust:100%;
      -ms-text-size-adjust:100%;
      width:100% !important;
    }

    /*
      Prevent Webkit and Windows Mobile platforms from changing default font
      sizes, while not breaking desktop design.
    */
    .ExternalClass {
      width:100%;
    } /* Force Hotmail to display emails at full width */

    .ExternalClass,
    .ExternalClass p,
    .ExternalClass span,
    .ExternalClass font,
    .ExternalClass td,
    .ExternalClass div {
      line-height: 100%;
    } /* Force Hotmail to display normal line spacing. */

    #background-table {
      background: #eaeff2;
      line-height: 100% !important;
      margin:0;
      padding:0;
      width:100% !important;
    }
    /* End reset */

    /* All the following styles should be brought inline during preflight */
    /*
      Some sensible defaults for images
      1. "-ms-interpolation-mode: bicubic" works to help ie properly resize
         images in IE. (if you are resizing them using the width and height
         attributes)
      2. "border:none" removes border when linking images.
      3. Updated the common Gmail/Hotmail image display fix: Gmail and Hotmail
         unwantedly adds in an extra space below images when using non IE
         browsers. You may not always want all of your images to be block
         elements. Apply the "image_fix" class to any image you need to fix.
    */
    img {
      -ms-interpolation-mode: bicubic;
      outline:none;
      text-decoration:none;
    }

    a img {
      border:none;
    }

    .image_fix {
      display:block;
    }

    /*
      Yahoo paragraph fix: removes the proper spacing or the paragraph (p) tag.
      To correct we set the top/bottom margin to 1em in the head of the
      document. Simple fix with little effect on other styling. NOTE: It is
      also common to use two breaks instead of the paragraph tag but I think
      this way is cleaner and more semantic. NOTE: This example recommends 1em.
      More info on setting web defaults: http://www.w3.org/TR/CSS21/sample.html
      or http://meiert.com/en/blog/20070922/user-agent-style-sheets/
    */
    p {
      margin: 1em 0;
    }

    /*
      Hotmail header color reset: Hotmail replaces your header color styles
      with a green color on H2, H3, H4, H5, and H6 tags. In this example, the
      color is reset to black for a non-linked header, blue for a linked
      header, red for an active header (limited support), and purple for a
      visited header (limited support).  Replace with your choice of color.
      The !important is really what is overriding Hotmail's styling. Hotmail
      also sets the H1 and H2 tags to the same size.
    */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      color: #333 !important;
    }

    h1 a,
    h2 a,
    h3 a,
    h4 a,
    h5 a,
    h6 a {
      color: #0095dd !important;
    }

    h1 a:active,
    h2 a:active,
    h3 a:active,
    h4 a:active,
    h5 a:active,
    h6 a:active {
      color: #0095dd !important;
    }

    h1 a:visited,
    h2 a:visited,
    h3 a:visited,
    h4 a:visited,
    h5 a:visited,
    h6 a:visited {
      color: #0095dd !important;
    }

    table td {
      border-collapse: collapse;
    }

    table {
      border-collapse:collapse;
      mso-table-lspace:0pt;
      mso-table-rspace:0pt;
    }

    a {
      color: #0095dd;
      text-decoration: none;
    }

    #main {
      width: 500px;
    }

    #main tbody td {
      background: #fff;
      padding: 30px;
    }

    #main thead th {
      font-size: 15px;
      padding: 32px 16px;
      text-align: left;
    }

    #main tfoot td {
      font-size: 13px;
      padding: 16px 30px 32px 30px;
    }

    .quote {
      border-left: 5px solid #eee;
      margin: 1em 0;
      padding: 10px 0 10px 20px;
    }

    .quote img {
      max-width: 100%;
    }

    .pre {
      font-family: monospace;
      white-space: pre;
    }

    .button {
      background: #81bc2f;
      border-radius: 6px;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
      border-bottom: 2px solid #548323;
      color: #fff;
      display: block;
      font-size: 17px;
      font-weight: bold;
      height: 42px;
      line-height: 42px;
      padding: 0 30px;
      text-align: center;
      text-decoration: none;
      text-shadow: 1px 1px 0 #426319;
    }

    .button.blue {
      background: #3C88CC;
      border-bottom: 2px solid #164e7f;
      text-shadow: 1px 1px 0 #164e7f;
    }

    .email-prefs {
      float: left;
    }

    .watch-link {
      float: right;
    }

    .email-prefs,
    .watch-link a {
      color: #999;
      font-size: 12px;
    }

    {% block styles %}{% endblock %}
  </style>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" id="background-table">
  <tr>
    <td>
      <table cellpadding="0" cellspacing="0" border="0" align="center" id="main">
        <thead>
          <tr>
            <th>
              <img src="{{ STATIC_URL }}sumo/email/img/mozilla-support.png" alt="{{ _('Mozilla Support') }}">
              {% block header %}{% endblock %}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>{% block content %}{% endblock %}</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td>
              {% block prefooter %}{% endblock %}
              {% block footer %}
                <a class="email-prefs" href="{{ url('users.edit_settings') }}">{{ _('Change your email preferences') }}</a>
                {% if watch %}
                  <div class="watch-link"><a href="{{ watch.unsubscribe_url() }}">{{ _('Unsubscribe from these emails') }}</a></div>
                {% endif %}
              {% endblock %}
            </td>
          </tr>
        </tfoot>
      </table>
    </td>
  </tr>
</table>
</body>
</html>
